/*
 * 魔妆镜后台登录页面
 * @Author: ljb
 * @Date: 2018-03-26 10:18:23
 * @Last Modified by: ljb
 * @Last Modified time: 2019-03-11 18:05:44
 */
<style lang="less" rel="stylesheet/less" type="text/less">
.v-admin-login-index {
	position: relative;
    width: 100%;
    height: 100%;
    background-image: url('//beauty-mirror.gz.bcebos.com/web_admin/login_bg1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
	background-color: #f0f2f5;
	padding-top: 20px;
    color: #fff;
    .login-content {
		width: 1100px;
		height: 600px;
        padding-top: -20px;
		margin: 8% auto 0;
        box-shadow: 0px 0px 10px 1px #cecece;
		border-radius: 10px;
		overflow: hidden;
		display: flex;
		justify-content: center;
		/*tabs选项卡切换*/
		.form-tabs {
			.ivu-tabs-tab {
				padding: 15px 20px;
				font-size: 16px;
			}
		}
		/*tabs选项卡切换 END*/
        .login-box {
            background: #fff;
            position: relative;
            width: 500px;
            height: 600px;
			padding: 20px 40px;
            h1 {
                line-height: 80px;
                text-align: center;
                letter-spacing: 3px;
                img {
                    width: 50%;
                }
            }
			.right {
                position: absolute;
				top: 370px;
				right: 75px;
				color: #2D8DF0;
				font-size: 14px;
                &:hover {
                    opacity: 0.8;
                }
			}
			.form-input {
				padding: 0 40px;
				margin: 70px 0;
				span {
					color: #B3D8FF;
					font-size: 12px;
					margin-left: 5px;
				}
				/*input输入框样式*/
				input {
					display: block;
					border: none;
					border-bottom: 1px solid #E5E5E5;
					width: 100%;
					outline: none;
					font-size: 14px;
					color: #333;
				}
			}
			/*表单按钮样式*/
			.form-button {
				text-align: center;
				.ivu-btn-primary {
					height: 45px;
					width: 350px;
					border-radius: 25px;
					font-size: 16px;
					color: #fff;
					margin-top: 50px;
					box-shadow: 0 9px 30px rgba(45,140,240,0.5);
				}
			}
			/*表单按钮样式 END*/
        }
    }
    .login-load {
        background-color: rgba(0, 0, 0, 0.5);
    }
    .footer-logo {
        position: absolute;
        bottom: 10px;
        width: 100%;
        height: 30px;
        font-size: 0;
        text-align: center;
        img {
            height: 100%;
        }
	}
	.language{
		position: absolute;
		right: 40px;
	}
}
</style>
<template>
	<div class="v-admin-login-index store-background">

		<!-- BEGIN: 切换语言 -->
		<Dropdown
			class="drop-down language"
			trigger="click"
			placement="bottom-end"
			@on-click="changLanguage">

			<Button type="default">
				<Icon type="ios-world-outline" /> {{ getCurrentLanguage }}
				<Icon type="arrow-down-b"/>
			</Button>

			<Dropdown-menu slot="list">
				<Dropdown-item
					v-for="(language, locale) in getLanguageOptions"
					:key="locale"
					:name="locale">{{ language }}</Dropdown-item>
			</Dropdown-menu>
		</Dropdown>
		<!-- END: 切换语言 -->

		<div class="login-content _fun-hide">
			<div>
				<img
					src="//beauty-mirror.gz.bcebos.com/web_admin/login_bg2.jpg"
					alt="">
			</div>
			<div
				v-show="forgotPass_show"
				class="login-box">
				<!-- <h1 class="login__title">{{ $t('login.store_title') }}</h1> -->
				<Form
					ref="formData"
					:model="form_data"
					:rules="ruleInline"
					name="store__admin">

					<Tabs
						:animated="false"
						class="form-tabs">
						<TabPane
							:label="$t('login.store_login')"
							class="store-login"
							name="store">
							<Form-item
								prop="user"
								class="form-input">
								<span>{{ $t('login.store_account') }}</span>
								<input
									v-model="form_data.account"
									:placeholder="$t('login.please_enter_account')"
									type="text"
									name="store-account">
							</Form-item>
							<Form-item
								prop="password"
								class="form-input">
								<span>{{ $t('login.store_password') }}</span>
								<input
									v-model="form_data.password"
									:placeholder="$t('login.please_enter_password')"
									type="password"
									name="store-password"
									@keydown.enter="handleSubmit('formData')">
							</Form-item>
						</TabPane>
					</Tabs>
					<a
						href="#"
						class="right"
						@click.prevent="goForgetPass">
						{{ $t('login.is_forget') }}
					</a>
					<Form-item
						class="form-button">
						<Button
							type="primary"
							long
							name="submit"
							@click="handleSubmit('formData')">
							{{ $t('login.login') }}
						</Button>
					</Form-item>
				</Form>

				<Spin
					v-if="login_loading"
					fix
					class="login-load">
					<Icon
						type="load-c"
						size="18"
						class="demo-spin-icon-load" />
					<div>
						{{ $t('login.please_wait') }}
					</div>
				</Spin>
			</div>
			<!-- 忘记密码 -->
			<div
				v-if="!forgotPass_show">
				<forgot-password
					:email-show="email_show"
					:asterisk-email="asterisk_email"
					:loading="login_loading"
					@senEmail="forgetPassword"
					@loginShow="loginShow"
					@backUp="backUp"/>
			</div>
		</div>
		<!-- 底部logo -->
		<div class="footer-logo">
			<img
				src="//beauty-mirror.gz.bcebos.com/web_admin%2Fpanx_home_name.png"
				alt="">
		</div>
	</div>
</template>
<script type="text/babel">
import { mapActions, mapMutations, mapGetters } from 'vuex';
/* eslint-disable import/extensions */
import API_LIST from 'src/API_LIST.js';
import { getLanguage, getLanguageForBackEnd } from 'src/i18n';
/* eslint-endisable import/extensions */
import forgotPassword from './forgot-password';

export default {
	components: {
		forgotPassword,
	},
	data() {
		return {
			login_loading: false, // 登陆中

			forgotPass_show: true, // 忘记密码显隐
			email_show: true, // 邮箱验证显隐
			asterisk_email: '', // 带星星电子邮箱

			form_data: {
				account: null, // 用户名
				password: null, // 密码
				type: 'store',
				lang: window.debug ? true : null,
			},
			ruleInline: {
				account: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('login.account') }),
						trigger: 'blur,change',
					},
				],
				password: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('login.password') }),
						trigger: 'blur,change',
					},
					{
						type: 'string',
						min: 6,
						message: this.$t('validate.min', { length: 6, field: this.$t('login.password') }),
						trigger: 'blur,change',
					},
				],
			},
		};
	},
	computed: {
		...mapGetters('app', [
			'getCurrentLanguage',
			'getLanguageOptions',
		]),
	},
	created() {
		this.init();
		this.initAutoLoginForm();
	},
	methods: {
		// action的引用
		...mapActions('userToken', ['toSetToken', 'toSetUserInfo', 'toSetUserRoles', 'toSetUserType', 'toSetLoginPath', 'toSetYouzanAuthorize']),
		...mapMutations('menu', ['setMenus', 'clearCache']),
		...mapMutations('app', [
			'setLocale',
		]),

		/**
		 *  初始化页面数据
		 */
		init() {
			this.form_data.lang = getLanguage(); // 初始化语言
			this.form_data.type = 'store';
			this.clearCache(); // 清除侧边栏菜单缓存
			this.toSetUserType(this.form_data.type); // 用户类型
		},

		/**
		 *  初始化账号
		 */
		initAutoLoginForm() {
			const { token, account } = this.$route.query;
			if (token && account) {
				this.toSetToken(token);
				this.form_data.account = account;
				this.form_data.password = 'debgbbug';
				this.postLoginForm(this.form_data)
					.then((result) => {
						if (result) { this.jumpToHomePage(); }
					});
			}
		},

		/**
		 * 控制登录页面显示
		 * @return {undefined} {description}
		 */
		goForgetPass() {
			this.email_show = true;
			this.forgotPass_show = false;
		},

		/**
		 * 返回上一级
		 * @return {undefined} {description}
		 */
		backUp() {
			this.email_show = true;
		},

		/**
		 * 控制登录页面显示
		 * @return {undefined} {description}
		 */
		loginShow() {
			this.forgotPass_show = true;
		},

		/**
         * 忘记密码
		 * @param {String} value {邮箱名称}
         * @return {undefined}
         */
		forgetPassword(value) {
			const param = {
				account: value,
				type: this.form_data.type,
				language: getLanguageForBackEnd(),
			};

			this.login_loading = true;

			this.$http
				.post(API_LIST.FORGET_PASSWORD, param)
				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) { throw new Error(data.error); }

					this.$Message.success(this.$t('login.reset_success_tip'));

					this.email_show = false;
					this.asterisk_email = data.asterisk_email; // 带星星电子邮箱

					this.$Message.info({
						content: this.$t('login.warm_tip'),
						// '温馨提示！重置密码的邮件有可能存放于您邮箱的垃圾箱之中',
						duration: 10,
						closable: true,
					});
				})
				.catch((err) => {
					this.$Message.error({
						content: err.message || err.statusText,
						duration: 5,
						closable: true,
					});
				})
				.then(() => {
					this.login_loading = false;
				});
		},

		// 提交表单的方法
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.postLoginForm(this.form_data)
						.then((status) => {
							if (!status) return;
							this.$Message.success(this.$t('login.login_success'));
							this.jumpToHomePage();
						});
				} else {
					this.$Message.error(this.$t('login.reset_psw_error_tip'));
				}
			});
		},

		/**
		 *  提交商家登陆表单
		 */
		postLoginForm(form, header) {
			this.login_loading = true; // 开启登陆动画
			return this.$http.post(API_LIST.ADMIN_LOGIN, form, {
				headers: header || {},
			})
				.then(({ data }) => {
					if (data.code !== 0) {
						throw new Error(data.error);
					} else {
						this.savaUserInfo(data);
						return true;
					}
				})
				.catch((error) => {
					this.$Message.error({
						content: error.message || error.statusText,
						duration: 5,
						closable: true,
					});
				})
				.then((result) => {
					this.login_loading = false;
					return result;
				});
		},


		/**
		 *  保存登陆数据
		 */
		savaUserInfo(data) {
			this.toSetToken(data.token); // 保存token
			this.toSetUserInfo(data.admin); // 保存用户数据
			this.toSetYouzanAuthorize(data.admin.has_youzan_authorize); // 保存有赞授权
			this.toSetUserRoles(data.roles); // 保存角色
			this.toSetLoginPath(this.$route.path);// 保存登陆进去的网址
		},


		/**
         *  登陆后，转跳到首页
         */
		jumpToHomePage() {
			this.$router.push({
				path: '/store',
			});
		},

		/**
		 *  切换语言
		 */
		changLanguage(language) {
			this.setLocale(language);
		},
	},
};
</script>
